<template>
  <div id="histogram">
    柱状图
  </div>
</template>
<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TitleComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  mounted() {
    var chartDom = document.getElementById('histogram')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      title: {
        text: '价格数量分布'
      },
      legend: {
        data: ['公寓', '写字楼', '商铺']
      },
      xAxis: [
        {
          type: 'category',
          data: ['1000', '2000', '3000', '4000', '5000']
        }
      ],
      yAxis: [
        {
          type: 'value',
          min: 0,
          max: 100,
          interval: 10
        }
      ],
      series: [
        {
          name: '公寓',
          type: 'bar',
          barGap: 0,
          data: [80, 32, 95, 76, 49]
        },
        {
          name: '写字楼',
          type: 'bar',
          data: [50, 68, 79, 54, 69]
        },
        {
          name: '商铺',
          type: 'bar',
          data: [65, 42, 37, 56, 20]
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>
<style scoped>
#histogram {
  height: 300px;
}
</style>
